<template>
    <h2>新增机构页面</h2>
    <table class="table table-bordered">
        <tbody>
            <tr>
                <td>机构名称</td>
                <td>
                    <input type="text" v-model="form.name">
                </td>
            </tr>
            <tr>
                <td>机构封面</td>
                <td>
                    <img :src="form.pic" style="display: '';max-width: 100px;max-height: 100px">
                    <input type="file" style="display: '';" id="file" @change="Tupian">
                </td>
            </tr>
            <tr>
                <td>特色服务</td>
                <td>
                    <select v-model="form.fuWu">
                        <option value="请选择">请选择</option>
                        <option value="特殊护理">特殊护理</option>
                        <option value="按摩">按摩</option>
                        <option value="洗脚">洗脚</option>
                        <option value="其他">其他</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>营业时间</td>
                <td>
                    <input type="date" v-model="form.yTime">
                </td>
            </tr>
            <tr>
                <td>机构地址</td>
                <td>
                    <input type="text" v-model="form.address">
                </td>
            </tr>
            <tr>
                <td>联系电话</td>
                <td>
                    <input type="text" v-model="form.phone">
                </td>
            </tr>
            <tr>
                <td>发布时间</td>
                <td>
                    <input type="date" v-model="form.fTime">
                </td>
            </tr>
            <tr>
                <td>状态</td>
                <td>
                    <input type="radio" v-model="form.start" value="1">已发布
                    <input type="radio" v-model="form.start" value="0">未发布
                </td>
            </tr>
            <tr>
                <td>机构详情</td>
                <td>
                    <textarea v-model="form.xiangQing">

                    </textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button class="btn btn-primary" @click="Add">添加</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
//引入组件
import { ref, reactive, onMounted } from "vue"
//bootstrap样式
import "bootstrap/dist/css/bootstrap.min.css"
import axios from "axios"
import { useRouter } from "vue-router";

const router = useRouter();
const form = reactive({
    id: 0,
    name: "",
    pic: "",
    fuWu: "请选择",
    yTime: "",
    address: "",
    phone: "",
    fTime: "",
    start: 0,
    xiangQing: ""
})
const Add = () => {
    if (!form.name) {
        alert("机构名称不能为空！！");
        return;
    }
    if (!form.fuWu) {
        alert("特色服务不能为空！！");
        return;
    }
    if (!form.yTime) {
        alert("营业时间不能为空！！");
        return;
    }
    if (!form.address) {
        alert("机构地址不能为空！！");
        return;
    }
    if (!form.phone) {
        alert("联系电话不能为空！！");
        return;
    }
    if (!form.fTime) {
        alert("发布时间不能为空！！");
        return;
    }
    if (!form.start) {
        alert("状态不能为空！！");
        return;
    }
    if (!form.xiangQing) {
        alert("机构详情不能为空！！");
        return;
    }
    axios.post("http://localhost:5028/api/Message/Add", form).then(res => {
        if (res.data > 0) {
            alert("添加成功！！");
            router.push("/messageShow");
        }
        else {
            alert("添加失败！");
        }
    })
}
//图片上传
const Tupian = (e: any) => {
    //定义菜单
    var formData = new FormData();
    //上传的文件信息
    var file = e.target.files[0];

    formData.append("file", file)

    axios.post("http://localhost:5028/api/Message/Pic", formData).then(res => {
        form.pic = res.data;
    }).catch(err => {
        console.log(err)
    })

}
</script>